import React, { useCallback, useEffect } from 'react'
import { useHistory, useLocation } from 'react-router-dom' 
import { useDispatch, useSelector } from 'react-redux'
// import React, { Component } from 'react'
// import { withRouter } from 'react-router-dom' 
// import { connect } from 'react-redux'

import { NavBar, Icon } from 'antd-mobile'
import animate from '@h/animate'

import { actionCreator } from '@/home/cookbook/index.js'
// import actionCreator from '@/home/cookbook/actionCreator.js'

import { ListWrap, SubTitle, ListContainer } from './StyledList'

// @animate
// @withRouter
// @connect(
//   state => ({
//     list: state.cookbook.list
//   }),
//   dispatch => ({
//     loadData() {
//       dispatch(actionCreator.loadDataAsync())
//     }
//   })
// )
// class List extends Component {
//   handleClickLeft = () => {
//     let { history } = this.props
//     // history.goBack()
//     // let from = this.props.location.state.from
//     history.push('/home', {from: '/list'})
//   }

//   componentDidMount() {
//     // 解决刷新页面，redux数据丢失问题
//     if(this.props.list.length === 0) {
//       this.props.loadData()
//     }
//   }

//   handleGoToDetail = (title) => {
//     return () => {
//       let { history, location } = this.props
//       history.push('/detail', { listTitle: location.state && location.state.title, title, from: '/list' })
//     }
//   }

//   render() {
//     let state = this.props.location.state
//     return (
//       <ListContainer>
//         <NavBar
//           mode="dark"
//           style={{backgroundColor: '#ee742f'}}
//           icon={<Icon type="left" />}
//           onLeftClick={this.handleClickLeft}
//         >{ state && state.title }</NavBar>
//         <ul>
//           {
//             this.props.list.map(li => (
//               <ListWrap width="0 0 1px 0" key={li.id} onClick={this.handleGoToDetail(li.name)}>
//                 <div>
//                   <img src={li.img} alt="" width="115" height="75"/>
//                 </div>
//                 <div>
//                   <h2>{li.name}</h2>
//                   <SubTitle>{li.burdens}</SubTitle>
//                   <p>{li.all_click}浏览量 {li.favorites}收藏量</p>
//                 </div>
//               </ListWrap>
//             ))
//           }
//         </ul>
//       </ListContainer>
//     )
//   }
// }

const List = (props) => {
  // const list = useSelector(state => state.cookbook.list)
  const list = useSelector(state => state.getIn(['cookbook', 'list']))
  const history = useHistory()
  const location = useLocation()
  const dispatch = useDispatch()

  const handleClickLeft = useCallback(() => {
    history.push('/home', {from: '/list'})
  },[history])

  useEffect(() => {
    if(list.size === 0) {
  // if(list.length === 0) {
      // dispatch(actionCreator.loadDataAsync())
      dispatch(actionCreator.loadDataSyncSaga())
    }
  }, [list, dispatch])

  const handleGoToDetail = useCallback((title) => {
    return () => {
      history.push('/detail', { listTitle: location.state && location.state.title, title, from: '/list' })
    }
  },[history, location])

  let state = location.state

  return (
    <ListContainer>
      <NavBar
        mode="dark"
        style={{backgroundColor: '#ee742f'}}
        icon={<Icon type="left" />}
        onLeftClick={handleClickLeft}
      >{ state && state.title }</NavBar>
      <ul>
        {
          list.map(li => (
            <ListWrap width="0 0 1px 0" key={li.id} onClick={handleGoToDetail(li.name)}>
              <div>
                <img src={li.img} alt="" width="115" height="75"/>
              </div>
              <div>
                <h2>{li.name}</h2>
                <SubTitle>{li.burdens}</SubTitle>
                <p>{li.all_click}浏览量 {li.favorites}收藏量</p>
              </div>
            </ListWrap>
          ))
        }
      </ul>
    </ListContainer>
  )
}

export default animate(List)
